<script>
import {ptzTurn} from '@/api/ptz/ptz'
export default {
  name: "PtzControll",
  props:{
    model:{
      type:Number
    },
    streamUrls:{
      type:Array
    }
  },
  watch:{
    model(oldValue,newValue){
      console.log(newValue)
    },
    streamUrls(oldValue,newValue){
      console.log(newValue)
    }
  },

  data(){
    return{
      scope:0
    }
  },
  methods:{
    turn(cmd){
      console.log(this.model)
      console.log(this.streamUrls)
      if (this.model != 1){
        this.$model.msgWarning("请在单分屏状态下调用");
        return;
      }

      if (this.streamUrls.length != 1){
        this.$model.msgWarning("请确保单路视频在播放");
        return;
      }
      let currentDev = this.streamUrls[0]
      const regex = /\/rtp\/(\d+)\./;
      const match = currentDev.match(regex);
      if (match) {
        // match[1] 是捕获组中的内容，即我们需要的部分
        const extractedNumber = match[1];
        console.log(extractedNumber)
        ptzTurn('stop',extractedNumber).then().catch(

        )
        return;
      } else {
        this.$model.msgWarning("未找到对应的设备");
        return;
      }

    },
    down(cmd){
      console.log(this.model)
      console.log(this.streamUrls)
      if (this.model != 1){
        this.$model.msgWarning("请在单分屏状态下调用");
        return;
      }

      if (this.streamUrls.length != 1){
        this.$model.msgWarning("请确保单路视频在播放");
        return;
      }
      let currentDev = this.streamUrls[0]
      const regex = /\/rtp\/(\d+)\./;
      const match = currentDev.match(regex);
      if (match) {
        // match[1] 是捕获组中的内容，即我们需要的部分
        const extractedNumber = match[1];
        console.log(extractedNumber)
        ptzTurn(cmd,extractedNumber).then().catch(

        )
        return;
      } else {
        this.$model.msgWarning("未找到对应的设备");
        return;
      }

    },
  }
}
</script>

<template>
  <div style="display: flex; flex-direction: row; justify-content: space-between">
    <div>
      <!--              <circle-buttons :devicesn="devicesn" style="margin: 20px"></circle-buttons>-->
      <circle-buttons :devicesn="devicesn" style="background-color:beige;margin-top: 10px;margin-left: 10px"></circle-buttons>
    </div>
    <div>

      <div style="display: flex; flex-direction: row; align-content: space-between; margin: 20px">
        <span @mousedown="devSmall" @mouseup="devStop"><el-button  class="direction-btn " icon="el-icon-minus" circle></el-button></span>
        <span class="yu-ziti" style="padding-top: 10px; margin: 0 20px"  >倍数调整</span>
        <span @mousedown="devBig" @mouseup="devStop"><el-button class="direction-btn " icon="el-icon-plus" circle></el-button></span>
      </div>
    </div>
  </div>
<!--  <div id="app-ptz">-->
<!--    <div class="circle-div">-->
<!--    <span id="up" @mouseup="turn('up')" @mousedown="down('up')">-->
<!--      <img class="ptzsize" src="@/assets/ptz/up.png">-->
<!--    </span>-->
<!--      <span id="down" @mouseup="turn('down')" @mousedown="down('down')">-->
<!--      <img class="ptzsize" src="@/assets/ptz/down.png">-->
<!--    </span>-->
<!--      <span id="lift"@mouseup="turn('lift')" @mousedown="down('lift')">-->
<!--      <img class="ptzsize" src="@/assets/ptz/lift.png">-->
<!--    </span>-->
<!--      <span id="right" @mouseup="turn('right')" @mousedown="down('right')">-->
<!--      <img class="ptzsize" src="@/assets/ptz/right.png">-->
<!--    </span>-->
<!--    </div>-->
<!--    <div class="fs">-->
<!--      <span @mouseup="turn('stop')" @mousedown="down('small')">-->
<!--        <el-button  class="direction-btn " icon="el-icon-minus" circle></el-button>-->
<!--      </span>-->
<!--      <span >倍数调整</span>-->
<!--      <span @mouseup="turn('stop')" @mousedown="down('big')">-->
<!--        <el-button icon="el-icon-plus" circle></el-button>-->
<!--      </span>-->
<!--    </div>-->


<!--  </div>-->
</template>

<style scoped>

#app-ptz{
  display: flex;
}

.circle-div{
  width: 60%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fs{
  width: 50%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 6px;
}

.circle-div {
  width: 22vh; /* 设置宽度 */
  height: 22vh; /* 设置高度，与宽度相等 */
  background-color: #3498db; /* 设置背景颜色 */
  border-radius: 50%; /* 设置边框圆角半径为50%，使div变为圆形 */
  position: relative; /* 父div设置为相对定位 */
}

.ptzsize{
  width: 30px;
  height: 36px;
  cursor: pointer;
}

.circle-div #up{
  position: absolute; /* 子div设置为绝对定位 */
  top: 12px;
  left: 91px;
  transform: translateX(-50%); /* 使用transform属性将子div水平居中于父div */
}

.circle-div #down{
  position: absolute; /* 子div设置为绝对定位 */
  bottom: 16px;
  left: 94px;
  transform: translateX(-50%); /* 使用transform属性将子div水平居中于父div */
}

.circle-div #lift{
  position: absolute; /* 子div设置为绝对定位 */
  top: 75px; /* 将子div向上移动50px，使其部分或全部位于父div上方 */
  left: 20px; /* 将子div的水平位置设置为父div宽度的50% */
  transform: translateX(-50%); /* 使用transform属性将子div水平居中于父div */
}

.circle-div #right{
  position: absolute; /* 子div设置为绝对定位 */
  top: 75px;
  right: -12px;
  transform: translateX(-50%); /* 使用transform属性将子div水平居中于父div */
}
</style>
